<template>
	<view>
		<dev-navbar :title="title"></dev-navbar>

		<view class="measurement-time-box justify-content-l">
			<view class="measurement-type">
				测量时间
			</view>
			<view class="align-items-l">
				{{historical_details.createTime}}
				<dev-svg-image height="32"></dev-svg-image>
			</view>
		</view>
		<view v-if="measurementItem.itemCode ==='BLOOD_SUGAR'" class="measurement-time-box justify-content-l">
			<view class="measurement-type">
				测量时间段
			</view>
			<view class="align-items-l">
				<text class="time-text" @tap="timePeriodPopup=true">
					{{selectTimeSlot.label}}
				</text>
				<dev-svg-image height="32"></dev-svg-image>
			</view>
		</view>
		<view class="data-title">
			{{measurementItem.indicName || ''}}
		</view>

		<view class="data-selection-box" v-if="measurementItem.itemCode=='BLOOD_PRESSURE'">
			<view class="" v-if="item.keyDesc!=='心率'" v-for="(item,index) in dataField" :key="index">
				<view class="">
					<view class="">
						<text class="small-name">{{item.keyDesc}}</text>
						<text class="big-name">{{historical_details[listKey[index]]}}</text>
						<text class="small-name">{{item.unit}}</text>
					</view>
					<view style="margin-top: 20rpx;">
						<dev-ruler disable :decimal="item.type*1" :min-num="item.min*1" :max-num="item.max*1"
							v-model="historical_details[listKey[index]]"
							:initialValue="historical_details[listKey[index]]"></dev-ruler>
					</view>
				</view>
				<dev-split-line v-show="index<1" bgColor="#F5F5F5" top="56" bottom="50"></dev-split-line>
			</view>
		</view>

		<view class="data-selection-box"
			v-if="measurementItem.itemCode!=='BLOOD_PRESSURE'&& measurementItem.itemCode!=='SLEEP' &&  measurementItem.itemCode!=='WEIGHT' && measurementItem.itemCode!=='FOUR_ITEMS_BLOOD_LIPID'">
			<view class="" v-for="(item,index) in dataField" :key="index">
				<view class="">
					<view class="">
						<text class="small-name">{{item.keyDesc}}</text>
						<text class="big-name">{{historical_details[listKey[index]]}}</text>
						<text class="small-name">{{item.unit}}</text>
					</view>
					<view style="margin-top: 20rpx;">
						<dev-ruler disable :decimal="item.type*1" :min-num="item.min*1" :max-num="item.max*1"
							v-model="historical_details[listKey[index]]"
							:initialValue="historical_details[listKey[index]]"></dev-ruler>
					</view>
				</view>
				<dev-split-line v-show="index!==dataField.length-1" bgColor="#F5F5F5" top="56" bottom="50">
				</dev-split-line>
			</view>
		</view>
		<!-- 体重 血脂四项-->
		<view class="data-selection-box"
			v-if="measurementItem.itemCode==='WEIGHT' || measurementItem.itemCode==='FOUR_ITEMS_BLOOD_LIPID'">
			<view class="" v-for="(item,index) in dataField" :key="index">
				<view class="">
					<view class="">
						<text class="small-name">{{item.keyDesc}}</text>
						<text class="big-name">{{weightData[item.key]}}</text>
						<text class="small-name">{{item.unit}}</text>
					</view>
					<view style="margin-top: 20rpx;">
						<dev-ruler disable :decimal="item.type*1" :min-num="item.min*1" :max-num="item.max*1"
							v-model="weightData[item.key]"
							:initialValue="weightData[item.key]"></dev-ruler>
					</view>
				</view>
				<dev-split-line v-show="index!==dataField.length-1" bgColor="#F5F5F5" top="56" bottom="50">
				</dev-split-line>
			</view>
		</view>
		<!-- 睡眠 -->
		<view class="data-selection-box" v-if="measurementItem.itemCode=='SLEEP'">
			<view class="">
				<text class="small-name">睡眠</text>
				<text class="big-name">{{(historical_details.firstValue/60).toFixed(1)}}</text>
				<text class="small-name">小时</text>
			</view>
		</view>
		<view v-if="measurementItem.itemCode=='BLOOD_PRESSURE'">
			<view class="data-title">
				心率
				<dev-svg-image @tap="displayHeartRate()" v-if="isHeartRate" mode="image"
					image-url="shoppingMall/01695B6103914A56979EE71E132D91F1.png"></dev-svg-image>
				<dev-svg-image @tap="displayHeartRate()" v-else mode="image"
					image-url="shoppingMall/720E0E6813AD4F8D878D0180E35338FC.png">
				</dev-svg-image>
			</view>
			<view class="data-selection-box" v-if="isHeartRate">
				<view class="" v-show="item.keyDesc=='心率'" v-for="(item,index) in dataField" :key="index">
					<view class="">
						<text class="small-name">{{item.keyDesc}}</text>
						<text class="big-name">{{historical_details[listKey[index]]}}</text>
						<text class="small-name">{{item.unit}}</text>
					</view>
					<view style="margin-top: 20rpx;">
						<dev-ruler disable :decimal="item.type*1" :min-num="item.min*1" :max-num="item.max*1"
							v-model="historical_details[listKey[index]]"
							:initialValue="historical_details[listKey[index]]"></dev-ruler>
					</view>
				</view>
			</view>
		</view>

		<view class="data-title" v-if="measurementItem.indicName=='血压'">
			测量状态
		</view>
		<view class="measurement-status" v-if="measurementItem.indicName=='血压'">
			<view class="every-button" v-for="(item,index) in statusList" :key="index">
				<dev-button :bgColor="item.delFlag==1?'#2EA7E0':'#E2E1E2'" width="160">{{item.measureStatusName}}
				</dev-button>
			</view>
			<view style="width: 160rpx;"></view>
			<view style="width: 160rpx;"></view>
		</view>

		<dev-iphone-bottom></dev-iphone-bottom>


		<u-modal show-cancel-button v-model="show" @confirm="clickSave()" :show-title="false">
			<view class="slot-content">
				<view class="custom">
					自定义
				</view>
				<input type="text" maxlength="4" v-model="measureStatusName" class="input-boxs-num">
			</view>
		</u-modal>

		<u-select v-model="timePeriodPopup" @confirm="selectTimePeriod" :list="list" title="请选择" cancel-color="#2EA7E0"
			confirm-color="#2EA7E0"></u-select>


	</view>
</template>

<script>

import uModal from "@/uview-ui/components/u-modal/u-modal.vue"
import uSelect from "@/uview-ui/components/u-select/u-select.vue"
	import dayjs from '@/common/utils/day/day.js'
	import devRuler from '@/pagesHome/components/dev-ruler.vue'
	import uniDatetimePicker from '@/pagesHome/components/uni-datetime-picker/uni-datetime-picker.vue'
	export default {
		components: {
			devRuler,
			uniDatetimePicker,
			uModal,
			uSelect,
		},
		data() {
			return {
				title: '记录',
				systolicPressure: 20, //收缩压
				diastolicPressure: 20, //收缩压
				isHeartRate: false, //是否测量心率
				show: false, //是否显示弹框

				currentTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
				createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), //记录时间

				measureStatusName: '', //测量状态名称

				measurementItem: {}, //当前测量项

				dataField: [], //尺子数据

				healthData: {}, //正常值

				statusList: [], //测量列表 

				list: [{
						value: '1',
						label: '空腹'
					},
					{
						value: '2',
						label: '早餐后'
					},
					{
						value: '3',
						label: '午餐前'
					},
					{
						value: '4',
						label: '午餐后'
					},
					{
						value: '5',
						label: '晚餐前'
					},
					{
						value: '6',
						label: '晚餐后'
					},
					{
						value: '7',
						label: '凌晨'
					}
				],
				timePeriodPopup: false, //时间段
				selectTimeSlot: {
					value: '1',
					label: '空腹'
				},
				timeSlot: '1', //时间段信息

				historical_details: '', //历史数据
				listKey: ['firstValue', 'secondValue', 'thirdValue'],
				
				weightData:'',//体重数据

			};
		},
		onLoad(e) {
			// console.log(e.data, 'data')
			this.historical_details = JSON.parse(e.historicalDetails);
            console.info(this.historical_details,"this.historical_details")    
            if(this.historical_details.deviceType ==="BLOOD_SUGAR"){
               this.selectTimeSlot = this.list[this.historical_details.timeSlot-1];
                 console.info( this.selectTimeSlot," this.selectTimeSlot")
            }
			this.measurementItem = JSON.parse(e.data);
			console.log(this.measurementItem, 'this.measurementItem');
            if(this.measurementItem)
			this.dataField = JSON.parse(this.measurementItem.dataField)
			this.weightData = JSON.parse(this.historical_details.healthData)
			console.log(this.dataField, 'this.dataField');
			this.title = '记录' + this.measurementItem.indicName
            if(this.measurementItem.indicName=='血压' && this.historical_details.thirdValue){
                this.displayHeartRate();
            }
			this.getMeasurementStatus(); //获取测量列表
		},
		methods: {
			//选择时间段
			selectTimePeriod(val) {
				this.selectTimeSlot = val[0];
				this.timeSlot = val[0].value;
			},

			//修改刻度数据
			changeNum(val, key) {
				console.log(val)
				this.healthData[key] = val;
			},
			//新增测量状态
			clickSave() {
				if (!this.measureStatusName) {
					this.$message.info('请输入状态名称')
				}
				this.addMeasurementStatus();
				this.show = false;
			},
			//选择的时间信息
			clickTime(e) {
				this.createTime = e;
				console.log(e)
			},
			//显示心率
			displayHeartRate() {
				this.isHeartRate = !this.isHeartRate;
			},
			//添加测量状态
			addMeasurementStatus() {
				this.$https.post(global.apiUrls.addMeasurementStatus, {
					indicId: this.measurementItem.indicId,
					measureStatusName: this.measureStatusName, //测量状态名称
				}).then(res => {
					if (res.data.code == 1000) {
						this.statusList.push(res.data.result);
						this.$message.info('添加成功')
					}
				})
			},
			//显示自定义弹框
			showCustomPopUps() {
				this.show = !this.show;
			},
			//获取测量状态
			getMeasurementStatus() {
				this.$https.get(global.apiUrls.getMeasurementStatus, {
					indicId: this.measurementItem.indicId,
				}).then(res => {
					if (res.data.code == 1000) {
						this.statusList = res.data.result;
						if (this.historical_details.measureStatusIds) {
							let measureStatusIdsList = this.historical_details.measureStatusIds.split(',')
							this.statusList.forEach(item => {
								measureStatusIdsList.forEach(child => {
									if (item.measureStatusId == child) {
										item['delFlag'] = 1;
									}
								})
							})
						}
					}
				})
			},
			//选择状态
			selectionStatus(item, index) {
				this.statusList[index].delFlag = item.delFlag == 1 ? 0 : 1;
			},

			//提交数据
			submitData() {
				let measureStatusIds = [];
				this.statusList.forEach(item => {
					if (item.delFlag == 1) {
						measureStatusIds.push(item.measureStatusId)
					}
				})
				console.log(measureStatusIds, 'measureStatusIds')
				// return
				this.$https.post(global.apiUrls.indicatorDataRecord, {
					createTime: this.createTime,
					healthData: JSON.stringify(this.healthData),
					inputType: 1,
					recordTime: this.createTime,
					deviceType: this.measurementItem.itemCode,
					measureStatusIds: measureStatusIds.toString(),
					timeSlot: this.measurementItem.itemCode === 'BLOOD_SUGAR' ? this.timeSlot : 0
				}).then(res => {
					if (res.data.code == 1000) {
						// 如果存在 taskLibraryType 这个值，代表是从任务过来的，在保存成功后，调用任务打卡。 
						if (this.measurementItem.taskLibraryType) {
							let pages = getCurrentPages(); //当前页面栈
							let beforePage = pages[pages.length - 2]; //指定调用页面为上个页面
							beforePage.$vm.punchTheClock() //getData 是你要调用上个页面的方法，微信小程序不需要用 $vm
						}
						this.$message.info('提交成功')
						uni.navigateBack({
							delta: 1
						});
					}
				})
			}



		}

	}
</script>

<style lang="scss">
	.slot-content {
		padding: 30rpx 40rpx;

		.custom {
			font-size: 36rpx;
			font-weight: 400;
			color: #000000;
			margin-bottom: 40rpx;
		}

		.input-boxs-num {
			width: 100%;
			box-sizing: border-box;
			// width:460rpx;
			height: 56rpx;
			border: 1rpx solid #979797;
			border-radius: 22rpx;
			padding: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #9B9B9B;
		}
	}


	.measurement-time-box {
		height: 102rpx;
		background-color: #fff;
		padding: 0rpx 24rpx;

		.measurement-type {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.time-text {
			font-size: 28rpx;
			font-weight: 400;
			color: #9B9B9B;
		}

	}

	.data-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 108rpx;
		padding: 0rpx 24rpx;
		font-size: 38rpx;
		font-weight: 500;
		color: #000000;
	}

	.measurement-status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 45rpx 24rpx 20rpx;
		background-color: #fff;

		.every-button {
			margin-bottom: 20rpx;
		}
	}

	.data-selection-box {
		padding: 45rpx 46rpx;
		background-color: #fff;
		text-align: center;

		.small-name {
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}

		.big-name {
			font-size: 58rpx;
			font-weight: 500;
			color: #000000;
			margin: 0rpx 10rpx;
		}

	}
</style>
